

@mixin toolbar-item($pos , $hoverPos){

	background-position: 0 $pos;

	&:hover{

		background-position:0 $hoverPos;
	}


}

.toolbar-item, .toolbar-layer{

	background-image: url(../img/toolbar.png);
	background-repeat: no-repeat;
}

$toolbar-size: 52px;
.toolbar{
	position:fixed;
	left: 50%;
	bottom: 5px;
	margin-left: -$toolbar-size / 2;
}
.toolbar-item{

	position: relative;
	display: block;
	width:$toolbar-size;
	height:$toolbar-size;
	
	margin-top: 1px;

	@include transition(background-position 1s);


      &:hover{

		.toolbar-layer{

			@include opacity(1);
			@include scale(1);
		}

      }
}
.toolbar-item-weinxin{
	
     @include toolbar-item(-798px, -860px);

	.toolbar-layer{

		height: 212px;
	 	
		background-position: 0 0;
     

	}
	
}
.toolbar-item-feedback{

	

	 @include toolbar-item(-426px,-488px);
	
}
.toolbar-item-app{



    @include toolbar-item(-550px,-612px);
	.toolbar-layer{

		height: 194px;

		background-position:0  -222px;


	}
	
}
.toolbar-item-top{


	
	 @include toolbar-item(-674px,-736px);
}
.toolbar-layer{
	position: absolute;
	right: $toolbar-size - 6;
	bottom: -10px;
	width: 172px;
	
	@include opacity(0);
	@include transform-origin(95% 95%);
	@include scale(0.01);
	@include transition(all 1s);

}